<template>
  <div class="browse">
    <!-- 顶部导航栏 -->
    <van-sticky>
      <van-nav-bar title="浏览">
        <template #right>
          <van-icon
            name="search"
            class="search-icon"
            @click="search"
            size="22"
          />
        </template>
      </van-nav-bar>
    </van-sticky>
    <!-- 栏目分类筛选 -->
    <van-row>
      <van-col span="24">
        <van-sticky :offset-top="46">
          <van-dropdown-menu active-color="#1989fa">
            <van-dropdown-item v-model="category" :options="cateList" />
            <van-dropdown-item v-model="sort" :options="viewList" />
            <van-dropdown-item v-model="isPay" :options="pay" />
          </van-dropdown-menu>
        </van-sticky>
      </van-col>
    </van-row>
    <!-- 内容 - 各文章展示 -->
    <template v-if="screenList">
      <van-row v-for="artItem in screenList" :key="artItem.title">
        <van-col span="22" offset="1" @click="articleItem(artItem.id)">
          <van-card
            :desc="artItem.synopsis"
            :title="artItem.title"
            thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
          >
            <template v-if="artItem.isPay != '0' ? true : false" #tag>
              <van-tag type="warning">付费</van-tag>
            </template>
            <template v-if="artItem.isPay != '0' ? true : false" #price>
              {{ artItem.price }}
            </template>
            <template v-if="artItem.isPay != '0' ? true : false" #num>
              1
            </template>
            <template #tags>
              <van-tag plain type="danger">{{ realCid(artItem.cid) }}</van-tag>
            </template>
            <template #footer>
              <van-button
                v-if="artItem.isPay != '0' ? true : false"
                size="mini"
                @click.stop="log(artItem)"
                >加入购物车</van-button
              >
              <van-button
                v-if="artItem.isPay != '0' ? true : false"
                size="mini"
                @click.stop="buyArticle(artItem)"
                >直接购买</van-button
              >
              <van-button v-else size="mini" @click.stop="log(artItem)"
                >加入书架</van-button
              >
            </template>
          </van-card>
        </van-col>
      </van-row>
    </template>
    <template v-else>
      <van-row>
        <van-col span="24">
          <van-empty description="暂无相关数据" />
        </van-col>
      </van-row>
    </template>
  </div>
</template>

<script>
import { request } from "network/request";

export default {
  name: "Browse",
  created() {
    this.getArticleDate();
  },
  data() {
    return {
      // 分类相关
      category: "all",
      cateList: [
        { text: "全部", value: "all" },
        { text: "生活", value: 1 },
        { text: "资讯", value: 2 },
        { text: "编程", value: 3 },
        { text: "互联网", value: 4 },
        { text: "科技", value: 5 },
      ],
      sort: "normal",
      viewList: [
        { text: "默认排序", value: "normal" },
        { text: "阅读量正序", value: 0 },
        { text: "阅读量倒序", value: 1 },
      ],
      isPay: "all",
      pay: [
        { text: "全部", value: "all" },
        { text: "免费", value: 0 },
        { text: "付费", value: 1 },
      ],
      // 初始文章数据
      articleList: []
    };
  },
  methods: {
    // 跳转到 Search页面
    search() {
      this.$router.push({ name: "search" });
    },
    // 获取文章数据的网络请求
    getArticleDate() {
      request({
        url: "article/data",
        method: "post",
      })
        .then((res) => {
          this.articleList = res.data;
          // console.log(res.data[0])
        })
        .catch((err) => console.log(err));
    },
    // 暂时的方法, 用来显示标签, 建议使用自然连接
    realCid(cid) {
      switch (cid) {
        case "1":
          return "生活";
        case "2":
          return "资讯";
        case "3":
          return "编程";
        case "4":
          return "互联网";
        case "5":
          return "科技";
      }
    },
    // 点击加入书架的效果
    log(item) {
      console.log(item);
    },
    buyArticle(item) {
      this.isSku = true;
      // this.sku = item
    },
    // 携带数据跳转到文章详情页面
    articleItem(id) {
      this.$router.push({ name: "product", params: { id } });
    },
  },
  computed: {
    // 筛选的文章列表
    screenList() {
      // console.log(`categorty: ${this.category}, sort: ${this.sort}, isPay: ${this.isPay}`)
      if (
        this.category != "all" ||
        this.isPay != "all" ||
        this.sort != "normal"
      ) {
        let screen = this.articleList;
        // 栏目分类
        if (this.category != "all") {
          screen = screen.filter((item) => {
            return item.cid == this.category;
          });
        }
        // 阅读量分类
        if (this.sort != "normal") {
          screen.mySort((a, b) => {
            return this.sort
              ? a.views < b.views
                ? 1
                : 0
              : a.views > b.views
              ? 1
              : 0;
          });
          // console.log('Good: ', screen.mySort())
        }
        // 付费与否分类
        if (this.isPay != "all") {
          screen = screen.filter((item) => {
            return item.isPay == this.isPay;
          });
        }
        return screen.length != 0 ? screen : false;
      }
      return this.articleList;
    },
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
.browse {
  padding-bottom: 60px;
}

.search-icon {
  font-size: 16px;
  line-height: 32.8px;
}
.art-card {
  margin-top: 10px;
  height: 120px;
  /* border: 1px solid #000; */
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 4px #888;
}
.van-card {
  border-radius: 15px;
  margin-top: 15px;
}
</style>
